<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            width: 200px;
            text-align: center;
        }
        a{
            display: block;
            line-height: 44px;
            background-color: chartreuse;
            cursor: pointer;
        }
        div{
            display: none;
        }
        p{
            line-height: 24px;
            background-color: darkcyan;
            margin:0
        }

    </style>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <ul>

    </ul>
</body>
<script>
    $(function(){
        $.ajax({
            url:'js/nav.json',
            success:function(res){
                adLi(res.data)
            }
        })

        function adLi(para){
            for(var i = 0;i<para.length;i++){
                var li = $(`<li><a>${para[i].country}</a></li>`);
                $('ul').append(li);
                if(para[i].peo){
                    $('li:last').append(`<div></div>`);
                    for(var j = 0;j<para[i].peo.length;j++){
                        var div = $(`<p>${para[i].peo[j]}</p>`);
                        $('div:last').append(div)
                    }
                }
                
                
            }
        }
        // 事件委托（动态添加的标签要事件委托才能获取到节点），最开始加载页面的时候只有ul标签
        $('ul').on('click','a',function(){
            console.log($(this))
            $(this).next().slideToggle();
        })

    })
</script>
</html>